<template>
    <div id="login">
        <div class="shadow redshadow"></div>
        <div class="shadow blueshadow"></div>
        <div id="loginBox">
            <h3>登录</h3>
            <el-form ref="loginForm" :model="state.loginForm" :rules="state.loginRules" label-width="0px">
                <el-form-item label="" prop="username" style="margin-top: 30px">
                    <div style="width: 100%">
                        <el-input
                            v-model="state.loginForm.username"
                            class="inps"
                            placeholder="用户名"
                            @keyup.enter="signIn(loginForm)"
                        >
                            <template #prefix>
                                <el-icon>
                                    <User />
                                </el-icon>
                            </template>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item label="" prop="password">
                    <el-input
                        v-model="state.loginForm.password"
                        class="inps"
                        placeholder="密码"
                        @keyup.enter="signIn(loginForm)"
                    >
                        <template #prefix>
                            <el-icon>
                                <Unlock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="" prop="captcha" class="imgInput">
                    <el-input
                        v-model="state.loginForm.captcha"
                        class="inps"
                        placeholder="验证码"
                        @keyup.enter="signIn(loginForm)"
                    >
                        <template #prefix>
                            <el-icon>
                                <CircleCheck />
                            </el-icon>
                        </template>
                    </el-input>
                    <img v-show="state.captchaImage" :src="state.captchaImage" alt="" @click="getCaptcha" />
                </el-form-item>
                <el-form-item style="margin-top: 45px">
                    <el-button
                        type="primary"
                        :loading="auth.loginLoading"
                        round
                        class="submitBtn"
                        @click="signIn(loginForm)"
                    >
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import iconSvgs from '@/components/iconSvgs.vue';
import API from '@/api';
import type { FormInstance } from 'element-plus';
import { useAuthStore } from '@/store';
import { useRouter } from 'vue-router';

const router = useRouter();
const auth = useAuthStore();
const loginForm = ref<FormInstance>();
const state = reactive({
    loginForm: {
        username: 'admin',
        password: '123456',
        captcha: '',
        captchaKey: ''
    },
    captchaImage: '',
    loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
    }
});

// 初始化验证码图片
const getCaptcha = async () => {
    try {
        const resp = await API.login_getCaptcha({ method: 'GET' });
        state.loginForm.captchaKey = resp.captchaKey;
        state.captchaImage = resp.captchaImage;
    } catch {}
};

const signIn = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(async valid => {
        if (valid) {
            try {
                const datas: AccountLogin.loginStaticParam = {
                    ...state.loginForm,
                    grant_type: 'password',
                    scope: 'web',
                    client_id: 'webApp',
                    client_secret: 'webApp'
                };
                await auth.login(datas);
                // router.push('home');
            } catch (error) {
                getCaptcha();
            }
        }
    });
};
onMounted(() => {
    getCaptcha();
});
</script>

<style lang="scss" scoped>
.aa {
    filter: brightness(0.2) saturate(2.25);
    width: 100%;
    height: 100%;
    display: block;
}
#login {
    width: 100%;
    padding: 0;
    margin: 0;
    height: 100vh;
    font-size: 16px;
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #242645;
    background: url('@img/backgorunimg.jpg') no-repeat;
    font-family: 'Source Sans Pro';
    background-size: 100%;
    position: relative;
    #bgd {
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }
    .shadow {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 240px;
        height: 280px;
        padding: 50px 40px 40px 40px;
        border-radius: 14px;
    }
    .redshadow {
        background-color: rgba(239, 106, 103, 0.8);
        transform: rotate(7deg);
    }
    .blueshadow {
        background-color: rgba(7, 85, 230, 0.7);
        transform: rotate(-7deg);
    }
    #loginBox {
        width: 240px;
        height: 280px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        padding: 50px 40px 40px 40px;
        opacity: 1;
        background: #fff;
        border-radius: 14px;

        h3 {
            text-align: center;
        }
        ::v-deep(.el-form-item) {
            margin-bottom: 22px;
        }
        ::v-deep(.el-input__wrapper) {
            border-radius: 18px;
            box-shadow: -4px 4px 8px #c5c5c5, 4px -4px 8px #fbfbfb;
        }
        .inps {
            --el-input-height: 34px;
            line-height: 34px;
            font-size: 12px;
        }
        .inps input {
            border: none;
            color: #fff;
            background-color: transparent;
        }
        .imgInput ::v-deep(.el-input) {
            width: 60%;
        }
        .imgInput ::v-deep(.el-input__wrapper) {
            background-color: transparent;
            border-radius: 18px;
        }
        .imgInput ::v-deep(.el-form-item__content) {
            background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
            border-radius: 18px;
            display: flex;
        }
        .imgInput img {
            width: 40%;
            height: 36px;
            cursor: pointer;
            border-bottom-right-radius: 18px;
            border-top-right-radius: 18px;
        }
        .submitBtn {
            width: 100%;
        }
        .iconfont {
            color: #fff;
        }
    }
}
</style>
